<template>
  <div id="order">
   <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <Scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="scroll-box">
          <div :class="['top', $store.state.scrollTop > 0 ?'fixedHeader':'']">
            <div class="order">
              <div class="fatherTab">
                <div class="title">
                  <ul class="header">
                    <li>收益金额</li>
                    <li>时间</li>
                  </ul>
                </div>
                <div class="list list_8">
                  <van-list
                    v-model="loading"
                    :finished-text="$t('m.noMore')"
                    :loading-text="$t('m.loading')"
                    :offset="100"
                    :finished="finished"
                    @load="onLoad"
                  >
                    <div class="every" v-for="(item,index) in list" :key="index">
                      <div class="box_1">{{item.profit}} CNN</div>
                      <div class="time">{{item.grantDate}}</div>
                    </div>
                  </van-list>
                </div>

              </div>
             
            </div>
          </div>
        </div>
      </Scroll>
    </div>

  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import Scroll from "@/components/scroll";
import { Toast, PullRefresh } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      loading: false,
      finished: false,
      currentPage: 0,
      total: 0,
      pageNum: 0,
      pageSize: 10,
      flag: false,
      scrollL: false,
      scrollR: true,
      scrollW: 0,
      show: true,
      scrollList: false,
      list:[],
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.scrollW = document.body.clientWidth;
    this.changeTitle('基金收益');
  },
  components: {
    Scroll,
    Header,
  },
  computed: {
    ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    scroll_R() {
      this.scrollList = !this.scrollList;
    },
    // 下拉刷新 deling 00
    onRefresh(done) {
      this.pageNum = 0;
      setTimeout(() => {
        done();
        this.list = [];
        this.getRecord();
      }, 500);
    },
    onInfinite(done) {
      setTimeout(() => {
        done(0);
      });
    },
    // end
    onLoad(type) {
      setTimeout(() => {
        // 加载状态结束
        if (this.pageNum != 0 && this.pageNum * 10 >= this.total) {
          this.finished = true;
          return;
        }
        this.getRecord();
      }, 500);
    },
    //获取列表
    getRecord() {
      this.pageNum = this.pageNum + 1;
        Services.getVcFundAssetDailyProfitList({
          token: this.loginToken,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }).then(res => {
          if (res.code == "0000") {
            this.list = this.list.concat(res.list);
            this.total = res.page.total;
            this.loading = false;
            if (this.pageNum * 10 >= this.total) {
              this.finished = true;
            }
          } else {
            this.loading = false;
            this.finished = true;
            Toast(res.msg);
          }
        });
      
    },
  
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#order {
  height: 100%;
  .nav {
    padding: 0 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    z-index: 999;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #40404c;
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0.5rem;
          height: 0.05rem;
          background: #e4b577;
        }
      }
    }
  }
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
  }
  .order {
    .fatherTab {
      min-height: calc(100vh - 0.88rem);
      padding: 0;
      position: relative;

      .title {
        > ul {
          display: flex;
          height: 1rem;
          line-height: 1rem;
          li {
            flex: 1;
            text-align: center;
            font-weight: bold;
            font-size: .32rem;
            color:#333;
          }
        }
      }
      >.list_8{
        .every{
          display: flex;
          height: .75rem;
          line-height: .75rem;
          >div{
              flex: 1;
              text-align: center;
              font-size: .28rem;
              color:#333;
             
          }
        }
        .every:nth-of-type(2n-1) {
          background: #f8f8f8;
        }
       
      }
    }
  }
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
#order {
  .order {
    .childTab .van-tabs__nav {
      background: transparent;
    }

    .van-tabs--card > .van-tabs__wrap {
      height: 0.67rem;
    }
    .van-tabs__nav {
      overflow: hidden;
      overflow-x: auto;
    }
    .van-tabs__nav--card {
      height: 0.67rem;
      border: none;
      margin: 0;
      background: transparent;
      .vant-tab {
        color: #c0c1c4;
      }
    }
    .van-tabs__nav--card .van-tab.van-tab--active {
      color: #fff;
      background: transparent;
      // background: url("~@/assets/img/new/titleBg@2x.png") no-repeat center /
      //   100% 100%;
    }
    #order .order .van-tabs__nav--card {
      width: 100%;
    }
    .van-tabs__nav--card .van-tab {
      color: #c0c1c4;
      border: none;
      padding: 0;
      // min-width: 33.333333%;
      width: 20%;
      &:nth-of-type(2n) {
        background: url("~@/assets/img/new/titleBg2@2x.png") no-repeat center /
          100% 100%;
        width: 40% !important;
      }
      span {
        background: transparent;
        line-height: 0.67rem;
      }
    }
  }
}
</style>